<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/5 0005
  Time: 14:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>金币统计</title>
    <jsp:include page="/commons/common-js.jsp"></jsp:include>
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">普通用户统计</li>
        <li>输赢统计</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <%--第一页--%>
            <table class="layui-hide" id="trantable" lay-filter="trantable"></table>
        </div>
        <div class="layui-tab-item">
            <%--第二页--%>
            <form class="layui-form layui-form-pane" action=""  lay-filter="transearchform">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width: 500px;">
                        <label class="layui-form-label" style="width: 100px">id</label>
                        <div class="layui-input-inline">
                            <input type="text" name="key" required  autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <button class="layui-btn layui-btn-ms" lay-submit=""  lay-filter="transearchbtn">搜索</button>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">注册时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="addTime"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">转出金额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="fromGold"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">转入金额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="toGold"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">差额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="change"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">转账次数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="num"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">转出次数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="fromNum"  autocomplete="off" class="layui-input">
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

<script type="text/html" id="changetemple">
    {{ d.toGold - d.fromGold}}
</script>

<script type="text/html" id="serchtoolbar">
    <form class="layui-form layui-form-pane" lay-filter="tranform" >
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto">年月选择</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="value" id="trandate" autocomplete="off" placeholder="yyyyMM">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-ms" lay-submit=""  lay-event="tranF5">搜索</button>
        </div>
    </form>
</script>

<script>
    layui.use(['table', 'form', 'laytpl','element','laydate'], function () {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate;

        var tableins = table.render({
            elem: '#trantable'
            , url: '/trancard/trancard'
            , defaultToolbar: []
            ,toolbar:'#serchtoolbar'
            , cols: [[
                {field: 'id', templet:timetemplet, width: 100, title: '时间'}
                , {field: 'fromGold', width: 100, title: '买分'}
                , {field: 'toGold', width: 100, title: '卖分'}
                , {field: 'change', templet:"#changetemple",width: 100, title: '卖分'}
                , {field: 'userNum', width: 100, title: '转账人数'}
                , {field: 'num', width: 100, title: '转账笔数'}
                , {field: 'cardNum', width: 100, title: '用卡人数'}
                , {field: 'cardGold', width: 100, title: '用卡金额'}
            ]]
        });

        //日期选择
        laydate.render({
            elem: '#trandate'
            ,type: 'month'
            ,format: 'yyyyMM'
        });

        //监听提交
        form.on('submit(tranform)', function(data){
            tableins.reload({
                where:{
                    'fromDate':data.field.value
                }
            })
            //重新渲染
            laydate.render({
                elem: '#trandate'
                ,type: 'month'
                ,format: 'yyyyMM'
            });
            return false;
        });

        //监听提交
        form.on('submit(transearchbtn)', function(data){

            var key = data.field.key
            $.ajax({
                url: '/trancard/usertran',
                data: {
                    'gid':key
                },
                success: function (res) {

                    form.val('transearchform',res)
                }
            })
            return false;
        });

        function timetemplet(d) {
            var id = d.id+"";
            return id.substring(0,4)+"-"+id.substring(4,6)+"-"+id.substring(6,8);
        }
    });

</script>

</body>
</html>
